<template>
  <div class="box">
      <p><span class="span-1">热销产品</span><span>更对新品<img src="../../assets/jinru.png" alt=""></span></p>
  <van-swipe-cell v-for="item in to">
      <div id="nav" >
          <img :src="item.URL" alt="" class="img-1">
          <div class="You">
              <div class="Midea">
                  <span class="span-1">{{item.person}}人团</span>
                  <span class="span-2">{{item.tradeName}}</span>
              </div>
              <div class="money">
                  <b class="b-3">￥{{item.price}}</b>
                  <span class="span-4">单买价<del>￥{{item.originalPrice}}</del></span>             
              </div>
              <div class="span-5">已拼{{item.numberOfPackages}}件</div>
              <div class="YouXia">
                  <div class="You-Zuo">
                      <p>{{item.discount}}人的折扣商品</p>
                      <p>{{item.share}}人瓜分￥{{item.participation}}参与奖</p>
                  </div>
                  <button>立即参与</button>
              </div>
          </div>
      </div>
    <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
    </div>
   
</template>

<script>
import fengjing from '../../assets/fengjing.jpeg'
import baozi from '../../assets/baozi.jpeg'
import haibao from '../../assets/haibao.jpeg'
import xiyang from '../../assets/xiyang.jpeg'
import shuidi from '../../assets/shuidi.jpeg'
export default {
        name:'Commodity',
        data() {
            return {
                to:[{
                    URL:fengjing,
                    person:10,
                    tradeName:'美的（Midea）破壁机高速加热机智能洗碗机...',
                    price:'299.0',
                    originalPrice:'499.0', 
                    numberOfPackages:75,
                    discount:2,
                    share:8,
                    participation:'12.00'
                },
                {
                    URL:baozi,
                    person:10,
                    tradeName:'美的（Midea）破壁机高速加热机智能洗碗机...',
                    price:'299.0',
                    originalPrice:'499.0', 
                    numberOfPackages:75,
                    discount:2,
                    share:8,
                    participation:'12.00'
                },{
                    URL:haibao,
                    person:10,
                    tradeName:'美的（Midea）破壁机高速加热机智能洗碗机...',
                    price:'299.0',
                    originalPrice:'499.0', 
                    numberOfPackages:75,
                    discount:2,
                    share:8,
                    participation:'12.00'
                },{
                    URL:xiyang,
                    person:10,
                    tradeName:'美的（Midea）破壁机高速加热机智能洗碗机...',
                    price:'299.0',
                    originalPrice:'499.0', 
                    numberOfPackages:75,
                    discount:2,
                    share:8,
                    participation:'12.00'
                },{
                    URL:shuidi,
                    person:10,
                    tradeName:'美的（Midea）破壁机高速加热机智能洗碗机...',
                    price:'299.0',
                    originalPrice:'499.0', 
                    numberOfPackages:75,
                    discount:2,
                    share:8,
                    participation:'12.00'
                },
                ]

            }
        },
}
</script>

<style lang="less" scoped>
      .delete-button {
    height: 100%;
  }
     .box{
       width: 100%;
       height: 100%;
       background-color: #fff;
       padding:0.5rem ;
       margin-bottom:4rem ;
       box-sizing: border-box;
       #nav{
           display: flex;
           font-size: 0.5rem;
           margin-bottom: 0.7rem;
        .img-1{
            width: 35%;
            margin-right: 0.5rem;
        }  
        .You{
            width: 90%;
            .Midea{
            .span-1{
                padding: 0.1rem;
                border-radius: 0.2rem;
                background-color: rgb(255, 145, 0);
                color: rgb(255, 255, 255);
            }
            .span-2{
                margin-left: 0.5rem;
                font-size: 0.8rem;
            }
        }
        .money{
            .b-3{
                font-size: 1rem;
                color: rgb(214, 82, 49);
            }
            .span-4{
                margin-left: 0.2rem;
                font-size: 0.7rem;
                color: rgb(146, 146, 146);
            }
        }
        .span-5{
            font-size: 0.8rem;
            padding: 0.1rem 0 0.3rem 0;
        }
        .YouXia{
            background-color: rgb(255, 239, 210);
            border-radius: 7px;
            height: 2.3rem;
            display: flex;
            justify-content: space-between;
            .You-Zuo{
               p{
                   margin: 0.2rem 0 0.2rem 0.3rem;
                   color: rgb(241, 113, 54);
               }
            }
            button{
                height: 1.5rem;
                line-height: 0.7rem;
                margin: .45rem 0.2rem .45rem 0;
                background-color: coral;
                color: rgb(238, 238, 238);
                border: none;
                border-radius: 5px;
                padding: 0.4rem;
            }
        }
        }
       }
       p{
         display: flex;
         justify-content: space-between;
         align-items: center;
         .span-1{
           width: 4rem;
           margin: 0.5rem 0.5rem 0.5rem 0;
           font-size: 0.9rem;
           border-left: 3px solid rgb(243, 107, 107);
           padding-left:0.3rem ;
         }
         span{
           font-size: 0.5rem;
           margin-right:0.5rem ;
           vertical-align: text-top;
           img{
             width: 0.4rem;
             margin:0 0 -0.1rem  0.2rem ;
           }
         }
       }
     }
</style>